<template>
  <div>
      <!-- 头部导航栏 -->
      <NavTop>
        <template #left>
          <van-icon  class="animate__animated animate__fadeInLeft" name="arrow-left" @click="leftFn" />
        </template>
        <template #right>
          <svg class="icon animate__animated animate__fadeInRight" aria-hidden="true" @click="rightFn">
            <use xlink:href="#icon-qita"></use>
          </svg>
        </template>
      </NavTop>
    <!-- 显示日记主体 -->
    <div class="diaryBox">
      <!-- 日记头部 -->
      <div class="header">
        <span>{{ userDiaryList.date }}</span>
        <p>·</p>
        <span>{{ userDiaryList.week }}</span>
        <p>·</p>
        <span>{{ userDiaryList.time }}</span>
        <!-- </div> -->
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ color: '#969799', borderColor: '#969799' }" />
      <!-- 文章主体 -->
      <div class="article">
        <div class="article-text">
          <span v-html="userDiaryList.content"></span>
        </div>
        <div class="article-img">
          <div v-if="userDiaryList.imgurl === undefined || userDiaryList.imgurl === null || userDiaryList.imgurl.length <= 0"></div>
          <div v-else>
            <van-image fit="cover" v-for="(data, i) in userDiaryList.imgurl.split('||')" :key="i" :src="data" @click="showImgFn(data, i)" />
          </div>
        </div>
      </div>
      <!-- 文章底部 -->
      <div class="footer">
        <!-- 日记天气/字数/地址详情 -->
        <!-- 天气 -->
        <span v-show="userDiaryList.wearther !== '获取天气失败'">
          <i :class="'qi-' + '100'"></i>
          <p>{{ userDiaryList.wearther }}&nbsp;·&nbsp;{{ userDiaryList.temperature }}℃</p>
        </span>
        <!-- 地址· -->
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dingwei"></use>
          </svg>
          <p>{{ userDiaryList.cityname }}</p>
        </span>
        <!-- 文字 -->
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zitiyulan"></use>
          </svg>
          <!-- <p>16 字</p> -->
          <p>{{ userDiaryList.tilength }} 字</p>
        </span>
      </div>
      <!-- 分割线 -->
      <van-divider dashed :style="{ color: '#9e9e9e', borderColor: '#9e9e9e' }" v-show="true">亲~今天有没有好好生活鸭~</van-divider>
      <!-- 编辑日记按钮· -->
      <div class="addiary animate__animated animate__fadeInRightBig" v-show="this.$store.state.AddbuttonShow" @click="editDiaryFn">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bi"></use>
        </svg>
      </div>
      <!-- 预览图片遮罩层 -->
      <van-overlay :show="overlayShow" @click="overlayShow = false" :z-index="999">
        <div class="overlay-top">
          <div class="overlay-top-left">
            <svg class="icon" aria-hidden="true" @click="uploadImgFn">
              <use xlink:href="#icon-xiazai-"></use>
            </svg>
          </div>
          <div class="overlay-top-right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-cuohaoyuan"></use>
            </svg>
          </div>
        </div>
        <div class="overlay-body">
          <!-- 预览图片轮播图 -->
          <van-swipe :initial-swipe="imgIndex">
            <van-swipe-item v-for="(item, j) in userDiaryImg" :key="j">
              <!-- <img /> -->
              <!-- <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" /> -->
              <img :src="item" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </van-overlay>
      <!-- 分享动作面板 -->
      <van-action-sheet v-model="actionSheetShow" :actions="actions" cancel-text="取消" @select="onSelect" />
      <!-- 分享日记的弹出层 => 保存日记页面保存为 图片 下载 本地 -->
      <van-popup v-model="popupShow" position="bottom" :style="{ height: '100%', width: '100%' }">
        <van-sticky>
          <!-- 头部导航栏 -->
          <NavTop>
            <template #left>
              <van-icon class="animate__animated animate__fadeInLeft" name="arrow-left" @click="popupLeftFn" />
            </template>
            <template #right>
              <svg class="icon animate__animated animate__fadeInRight" aria-hidden="true" @click="saveHtmlFn">
                <use xlink:href="#icon-xiazai-"></use>
              </svg>
            </template>
          </NavTop>
        </van-sticky>
        <!-- 日记主体 -->
        <div class="box">
        <div class="popup-box" ref="diaryDom">
          <div class="box-top">
            <span>{{ userDiaryList.date }} &nbsp;&nbsp;</span>
            <span>{{ userDiaryList.time }}</span>
          </div>
          <div class="box-content">
            <span v-html="userDiaryList.content"></span>
          </div>
          <div class="box-img">
            <div v-if="userDiaryList.imgurl === undefined || userDiaryList.imgurl === null || userDiaryList.imgurl.length <= 0"></div>
            <div v-else>
              <van-image fit="cover" v-for="(data, i) in userDiaryList.imgurl.split('||')" :key="i" :src="data" />
            </div>
          </div>
        </div>
      </div>
        <!-- 分割线 -->
        <van-divider dashed :style="{ color: '#9e9e9e', borderColor: '#9e9e9e' }" v-show="true">亲~右上角可将日记保存到相册捏~</van-divider>
      </van-popup>
    </div>
  </div>
</template>

<script>
import NavTop from '@/components/home/homenNavTop.vue'
import { Toast } from 'vant'
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      // 用户点击进来的日记数据
      userDiaryList: '',
      // 预览图片遮罩层
      overlayShow: false,
      // 用户点击进来的那个日记的图数组
      userDiaryImg: [],
      // 用户点击预览那个图片的初始索引值
      imgIndex: '',
      // 分享动作面板
      actionSheetShow: false,
      // 分享动作面板的选项
      actions: [{ name: '保存本地' }],
      // 分享页面弹出层
      popupShow: false
    }
  },
  components: {
    NavTop
  },
  // created () {
  //   console.log(this.$route.params.item)
  //   this.userDiaryList = this.$route.params.item
  //   // console.log(this.userDiaryList)
  // },
  activated () {
    // console.log(this.$route.params.item)
    this.userDiaryList = this.$store.state.clickDiaryList
    // console.log(this.userDiaryList)
  },
  // watch: {
  //   $route (to, from) {
  //     // console.log(to.path)
  //     if (to.path === '/home') {
  //       clearInterval(this.timmer)
  //       this.timmer = setInterval(() => {
  //         clearInterval(this.timmer)
  //         this.$store.commit('setButtonShow', true)
  //       }, 100)
  //     }
  //     if (to.path === '/userdiary') {
  //       clearInterval(this.timmer)
  //       this.timmer = setInterval(() => {
  //         clearInterval(this.timmer)
  //         this.$store.commit('setButtonShow', true)
  //       }, 100)
  //     }
  //     this.$store.commit('setButtonShow', false)
  //   }
  // },
  methods: {
    // 返回上一页
    leftFn () {
      this.$router.replace('/home')
    },
    // 点击分享
    rightFn () {
      this.actionSheetShow = true
    },
    // 点击动作面板那个选项 => 将日记保存手机
    onSelect (item) {
      // console.log('跳转页面')
      this.popupShow = true
      this.actionSheetShow = false
    },
    // 点击展示图片
    showImgFn (data, i) {
      this.imgIndex = i
      // 接口返回的是 base64字符串 将他们根据 || 分割成数组
      if (this.userDiaryList.imgurl !== undefined || this.userDiaryList.imgurl !== null || this.userDiaryList.imgurl.length > 0) {
        const arr = this.userDiaryList.imgurl.split('||')
        this.userDiaryImg = arr
        // console.log(this.userDiaryImg)
      }
      this.overlayShow = true
    },
    popupLeftFn () {
      this.popupShow = false
    },
    // 将页面 => 转化为图片 => 用户保存到相册
    saveHtmlFn () {
      // console.log('页面转化为页面')
      // setTimeout(() => {
      html2canvas(this.$refs.diaryDom).then(canvas => {
        const diaryImgurl = canvas.toDataURL('image/png')
        const a = document.createElement('a')
        a.style.display = 'none'
        a.download = '忘忧日记' + '.jpg'
        a.href = diaryImgurl
        document.body.appendChild(a)
        a.click()
        Toast({
          message: '点击下载保存到本地',
          duration: 3000
        })
        document.body.removeChild(a)
      }).catch(err => {
        console.log(err)
      })
      // }, 1000)
    },
    // 编辑日记
    editDiaryFn () {
      // console.log(this.userDiaryList)
      this.$router.replace('/editDiary')
    },
    // 点击保存图片
    uploadImgFn () {
      // console.log(this.userDiaryImg[this.imgIndex])
      // console.log(this.imgIndex)
      // console.log(this.userDiaryImg[this.imgIndex])
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = '忘忧日记' + '.jpg'
      a.href = this.userDiaryImg[this.imgIndex]
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-sticky {
  background-color: #fff;
  width: 100%;
}
/deep/.top {
    background-color: white;
}
.diaryBox {
  padding: 60px 0;
  .header {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #969799;
    padding-top: 20px;
    line-height: 20px;
    p {
      font-size: 32px;
      line-height: 10px;
      padding: 0 5px;
    }
  }
  .van-divider {
    margin: 12px 26px;
  }
  /deep/ .van-action-sheet__cancel,
  .van-action-sheet__item {
    font-size: 16px;
    padding: 20px;
  }
  .article {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .article-text {
      font-size: 15px;
      color: #323233;
      padding: 0 26px;
      display: inline-block;
      white-space: normal;
      word-break: break-all;
      /deep/p {
        letter-spacing: 2px;
        line-height: 23px;
      }
    }
    .article-img {
      margin-top: 5px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      padding: 21px 21px 10px 21px;
      .van-image {
        width: 150px;
        height: 150px;
        padding: 8px;
        /deep/.van-image__img {
          border-radius: 10px;
        }
      }
    }
  }
  .footer {
    padding: 0px 28px 30px 28px;
    span {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 6px 0;
      i {
        font-size: 19px;
        color: #969799;
        padding-right: 6px;
      }
      .icon {
        width: 18px;
        height: 18px;
        padding-right: 6px;
        fill: #969799;
      }
      p {
        font-size: 12px;
        color: #969799;
      }
    }
  }
  .van-divider {
    padding: 30px 0;
  }
  .addiary {
    width: 50px;
    background-color: #6ed9a2;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    text-align: center;
    box-shadow: 0px 0px 15px -2px;
    .icon {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 30%;
      left: 32%;
      fill: #ffffff;
    }
  }
  .van-overlay {
    background-color: black;
    .overlay-top {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;

      .overlay-top-left {
        .icon {
          font-size: 14px;
          width: 25px;
          height: 25px;
          display: block;
          fill: #aaaaaa;
          padding: 30px;
        }
      }
      .overlay-top-right {
        .icon {
          font-size: 14px;
          width: 25px;
          height: 25px;
          display: block;
          fill: #aaaaaa;
          padding: 30px;
        }
      }
    }
    .overlay-body {
      height: 500px;
      .van-swipe {
        height: 100%;
        /deep/.van-swipe__indicators {
          top: 0;
        }
        .van-swipe__track {
          .van-swipe-item {
            display: flex;
            align-items: center;
            img {
              width: 100%;
            }
          }
        }
        /deep/.van-swipe__indicator {
          width: 8px;
          height: 8px;
          background-color: #ebedf0;
        }
        /deep/.van-swipe__indicator--active {
          background-color: #6ed9a2;
          opacity: 1;
        }
      }
    }
  }
  .box{
    padding: 60px 0;
    .popup-box {
    margin: 40px 22px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 0 3px 0 #f7f8fa;
    .box-top {
      display: flex;
      flex-direction: row;
      color: #969799;
      padding: 20px 15px;
      font-size: 15px;
    }
    .box-content {
      font-size: 15px;
      color: #323233;
      padding: 0 26px;
      display: inline-block;
      white-space: normal;
      word-break: break-all;
      /deep/p {
        letter-spacing: 2px;
        line-height: 23px;
      }
    }
    .box-img {
      padding: 20px 15px;
      /deep/ img {
        width: 100%;
        border-radius: 15px;
        padding: 5px 0;
      }
      .van-divider {
        padding: 30px 0;
      }
    }
  }
  }

}
</style>
